<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>逐行理解create-react-app中的package.json - smartzheng</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="smartzheng" /><meta name="description" content="下面是自己react项目初始化之后的package.json文件，除了个别自己新增依赖以外，基本是create-react-app生成的默认" /><meta name="keywords" content="Hugo, theme, even" />






<meta name="generator" content="Hugo 0.68.3 with theme even" />


<link rel="canonical" href="https://smartzheng.github.io/post/%E9%80%90%E8%A1%8C%E7%90%86%E8%A7%A3create-react-app%E4%B8%AD%E7%9A%84package.json/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">


<link href="/dist/even.c2a46f00.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="逐行理解create-react-app中的package.json" />
<meta property="og:description" content="下面是自己react项目初始化之后的package.json文件，除了个别自己新增依赖以外，基本是create-react-app生成的默认" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://smartzheng.github.io/post/%E9%80%90%E8%A1%8C%E7%90%86%E8%A7%A3create-react-app%E4%B8%AD%E7%9A%84package.json/" />
<meta property="article:published_time" content="2019-09-30T00:00:00+00:00" />
<meta property="article:modified_time" content="2019-09-30T00:00:00+00:00" />
<meta itemprop="name" content="逐行理解create-react-app中的package.json">
<meta itemprop="description" content="下面是自己react项目初始化之后的package.json文件，除了个别自己新增依赖以外，基本是create-react-app生成的默认">
<meta itemprop="datePublished" content="2019-09-30T00:00:00&#43;00:00" />
<meta itemprop="dateModified" content="2019-09-30T00:00:00&#43;00:00" />
<meta itemprop="wordCount" content="2075">



<meta itemprop="keywords" content="React," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="逐行理解create-react-app中的package.json"/>
<meta name="twitter:description" content="下面是自己react项目初始化之后的package.json文件，除了个别自己新增依赖以外，基本是create-react-app生成的默认"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">smartzheng</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/">
        <li class="mobile-menu-item">Home</li>
      </a><a href="/post/">
        <li class="mobile-menu-item">Archives</li>
      </a><a href="/tags/">
        <li class="mobile-menu-item">Tags</li>
      </a><a href="/categories/">
        <li class="mobile-menu-item">Categories</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/" class="logo">smartzheng</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/">Home</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/post/">Archives</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/tags/">Tags</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/categories/">Categories</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">逐行理解create-react-app中的package.json</h1>

      <div class="post-meta">
        <span class="post-time"> 2019-09-30 </span>
        <div class="post-category">
            <a href="/categories/web%E5%89%8D%E7%AB%AF/"> web前端 </a>
            </div>
        
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content always-active">
    <nav id="TableOfContents"></nav>
  </div>
</div>
    <div class="post-content">
      <p>下面是自己react项目初始化之后的package.json文件，除了个别自己新增依赖以外，基本是create-react-app生成的默认配置，下面是对package.json中每一行（除jest之外）的解释：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">  1
</span><span class="lnt">  2
</span><span class="lnt">  3
</span><span class="lnt">  4
</span><span class="lnt">  5
</span><span class="lnt">  6
</span><span class="lnt">  7
</span><span class="lnt">  8
</span><span class="lnt">  9
</span><span class="lnt"> 10
</span><span class="lnt"> 11
</span><span class="lnt"> 12
</span><span class="lnt"> 13
</span><span class="lnt"> 14
</span><span class="lnt"> 15
</span><span class="lnt"> 16
</span><span class="lnt"> 17
</span><span class="lnt"> 18
</span><span class="lnt"> 19
</span><span class="lnt"> 20
</span><span class="lnt"> 21
</span><span class="lnt"> 22
</span><span class="lnt"> 23
</span><span class="lnt"> 24
</span><span class="lnt"> 25
</span><span class="lnt"> 26
</span><span class="lnt"> 27
</span><span class="lnt"> 28
</span><span class="lnt"> 29
</span><span class="lnt"> 30
</span><span class="lnt"> 31
</span><span class="lnt"> 32
</span><span class="lnt"> 33
</span><span class="lnt"> 34
</span><span class="lnt"> 35
</span><span class="lnt"> 36
</span><span class="lnt"> 37
</span><span class="lnt"> 38
</span><span class="lnt"> 39
</span><span class="lnt"> 40
</span><span class="lnt"> 41
</span><span class="lnt"> 42
</span><span class="lnt"> 43
</span><span class="lnt"> 44
</span><span class="lnt"> 45
</span><span class="lnt"> 46
</span><span class="lnt"> 47
</span><span class="lnt"> 48
</span><span class="lnt"> 49
</span><span class="lnt"> 50
</span><span class="lnt"> 51
</span><span class="lnt"> 52
</span><span class="lnt"> 53
</span><span class="lnt"> 54
</span><span class="lnt"> 55
</span><span class="lnt"> 56
</span><span class="lnt"> 57
</span><span class="lnt"> 58
</span><span class="lnt"> 59
</span><span class="lnt"> 60
</span><span class="lnt"> 61
</span><span class="lnt"> 62
</span><span class="lnt"> 63
</span><span class="lnt"> 64
</span><span class="lnt"> 65
</span><span class="lnt"> 66
</span><span class="lnt"> 67
</span><span class="lnt"> 68
</span><span class="lnt"> 69
</span><span class="lnt"> 70
</span><span class="lnt"> 71
</span><span class="lnt"> 72
</span><span class="lnt"> 73
</span><span class="lnt"> 74
</span><span class="lnt"> 75
</span><span class="lnt"> 76
</span><span class="lnt"> 77
</span><span class="lnt"> 78
</span><span class="lnt"> 79
</span><span class="lnt"> 80
</span><span class="lnt"> 81
</span><span class="lnt"> 82
</span><span class="lnt"> 83
</span><span class="lnt"> 84
</span><span class="lnt"> 85
</span><span class="lnt"> 86
</span><span class="lnt"> 87
</span><span class="lnt"> 88
</span><span class="lnt"> 89
</span><span class="lnt"> 90
</span><span class="lnt"> 91
</span><span class="lnt"> 92
</span><span class="lnt"> 93
</span><span class="lnt"> 94
</span><span class="lnt"> 95
</span><span class="lnt"> 96
</span><span class="lnt"> 97
</span><span class="lnt"> 98
</span><span class="lnt"> 99
</span><span class="lnt">100
</span><span class="lnt">101
</span><span class="lnt">102
</span><span class="lnt">103
</span><span class="lnt">104
</span><span class="lnt">105
</span><span class="lnt">106
</span><span class="lnt">107
</span><span class="lnt">108
</span><span class="lnt">109
</span><span class="lnt">110
</span><span class="lnt">111
</span><span class="lnt">112
</span><span class="lnt">113
</span><span class="lnt">114
</span><span class="lnt">115
</span><span class="lnt">116
</span><span class="lnt">117
</span><span class="lnt">118
</span><span class="lnt">119
</span><span class="lnt">120
</span><span class="lnt">121
</span><span class="lnt">122
</span><span class="lnt">123
</span><span class="lnt">124
</span><span class="lnt">125
</span><span class="lnt">126
</span><span class="lnt">127
</span><span class="lnt">128
</span><span class="lnt">129
</span><span class="lnt">130
</span><span class="lnt">131
</span><span class="lnt">132
</span><span class="lnt">133
</span><span class="lnt">134
</span><span class="lnt">135
</span><span class="lnt">136
</span><span class="lnt">137
</span><span class="lnt">138
</span><span class="lnt">139
</span><span class="lnt">140
</span><span class="lnt">141
</span><span class="lnt">142
</span><span class="lnt">143
</span><span class="lnt">144
</span><span class="lnt">145
</span><span class="lnt">146
</span><span class="lnt">147
</span><span class="lnt">148
</span><span class="lnt">149
</span><span class="lnt">150
</span><span class="lnt">151
</span><span class="lnt">152
</span><span class="lnt">153
</span><span class="lnt">154
</span><span class="lnt">155
</span><span class="lnt">156
</span><span class="lnt">157
</span><span class="lnt">158
</span><span class="lnt">159
</span><span class="lnt">160
</span><span class="lnt">161
</span><span class="lnt">162
</span><span class="lnt">163
</span><span class="lnt">164
</span><span class="lnt">165
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-json" data-lang="json"><span class="p">{</span>
  <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;react-wanandroid&#34;</span><span class="p">,</span> <span class="err">//项目名</span>
  <span class="nt">&#34;version&#34;</span><span class="p">:</span> <span class="s2">&#34;0.1.0&#34;</span><span class="p">,</span> <span class="err">//版本号</span>
  <span class="nt">&#34;private&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="err">//私有项目,禁止意外发布私有存储库的方法</span>
  <span class="nt">&#34;dependencies&#34;</span><span class="p">:</span> <span class="p">{</span> <span class="err">//依赖包,在开发和线上环境均需要使用</span>
    <span class="nt">&#34;axios&#34;</span><span class="p">:</span> <span class="s2">&#34;^0.19.0&#34;</span><span class="p">,</span> <span class="err">//网络请求</span>
    <span class="nt">&#34;dotenv&#34;</span><span class="p">:</span> <span class="s2">&#34;8.1.0&#34;</span><span class="p">,</span> <span class="err">//管理环境变量的模块,通过配置.env文件可以控制环境变量</span>
    <span class="nt">&#34;dotenv-expand&#34;</span><span class="p">:</span> <span class="s2">&#34;5.1.0&#34;</span><span class="p">,</span> <span class="err">//扩展环境变量</span>
    <span class="nt">&#34;react&#34;</span><span class="p">:</span> <span class="s2">&#34;^16.10.1&#34;</span><span class="p">,</span>  <span class="err">//react核心库</span>
    <span class="nt">&#34;react-app-polyfill&#34;</span><span class="p">:</span> <span class="s2">&#34;^1.0.3&#34;</span><span class="p">,</span> <span class="err">//官方提供的兼容库,主要用于处理IE兼容问题</span>
    <span class="nt">&#34;react-dev-utils&#34;</span><span class="p">:</span> <span class="s2">&#34;^9.0.4&#34;</span><span class="p">,</span>
    <span class="nt">&#34;react-dom&#34;</span><span class="p">:</span> <span class="s2">&#34;^16.10.1&#34;</span><span class="p">,</span> <span class="err">//react核心库,处理虚拟DOM渲染等功能</span>
    <span class="nt">&#34;react-loadable&#34;</span><span class="p">:</span> <span class="s2">&#34;^5.5.0&#34;</span><span class="p">,</span> <span class="err">//组件按需加载,可以提高首次加载速度</span>
    <span class="nt">&#34;react-router-dom&#34;</span><span class="p">:</span> <span class="s2">&#34;^5.1.1&#34;</span><span class="p">,</span> <span class="err">//路由</span>
  <span class="p">},</span>
  <span class="nt">&#34;devDependencies&#34;</span><span class="p">:</span> <span class="p">{</span> <span class="err">//只在开发环境存在的依赖</span>
    <span class="nt">&#34;@babel/core&#34;</span><span class="p">:</span> <span class="s2">&#34;7.6.2&#34;</span><span class="p">,</span> <span class="err">//babel核心;babel是一个主要(不仅仅只是)用于将ECMAScript2015+版本的代码转换为向后兼容的JavaScript语法的工具链</span>
    <span class="nt">&#34;@hot-loader/react-dom&#34;</span><span class="p">:</span> <span class="s2">&#34;^16.9.0&#34;</span><span class="p">,</span> <span class="err">//热更新,提高开发效率</span>
    <span class="nt">&#34;@svgr/webpack&#34;</span><span class="p">:</span> <span class="s2">&#34;4.3.3&#34;</span><span class="p">,</span> <span class="err">//处理svg格式文件的webpack</span> <span class="err">loader</span>
    <span class="nt">&#34;@typescript-eslint/eslint-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;^2.3.1&#34;</span><span class="p">,</span><span class="err">//ts语法审查</span>
    <span class="nt">&#34;@typescript-eslint/parser&#34;</span><span class="p">:</span> <span class="s2">&#34;^2.3.1&#34;</span><span class="p">,</span> <span class="err">//ts解析器</span>
    <span class="nt">&#34;acorn&#34;</span><span class="p">:</span> <span class="s2">&#34;^7.1.0&#34;</span><span class="p">,</span>
    <span class="nt">&#34;babel-eslint&#34;</span><span class="p">:</span> <span class="s2">&#34;10.0.3&#34;</span><span class="p">,</span> <span class="err">//对所有有效的babel代码进行lint处理</span>
    <span class="nt">&#34;babel-jest&#34;</span><span class="p">:</span> <span class="s2">&#34;^24.9.0&#34;</span><span class="p">,</span> <span class="err">//转换jest代码</span>
    <span class="nt">&#34;babel-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;8.0.6&#34;</span><span class="p">,</span> <span class="err">//对js|mjs|jsx|ts|tsx处理的webpack</span> <span class="err">loader</span>
    <span class="nt">&#34;babel-plugin-named-asset-import&#34;</span><span class="p">:</span> <span class="s2">&#34;^0.3.4&#34;</span><span class="p">,</span> <span class="err">//babel-loader中的文件导入处理plugin</span>
    <span class="nt">&#34;babel-preset-react-app&#34;</span><span class="p">:</span> <span class="s2">&#34;^9.0.2&#34;</span><span class="p">,</span> <span class="err">//按照react-app的模式配置babel,下面的babel项中可以配置详细参数(指定typescript语法等)</span>
    <span class="nt">&#34;camelcase&#34;</span><span class="p">:</span> <span class="s2">&#34;^5.3.1&#34;</span><span class="p">,</span> <span class="err">//驼峰命名检查</span>
    <span class="nt">&#34;case-sensitive-paths-webpack-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;2.2.0&#34;</span><span class="p">,</span> <span class="err">//处理导入路径语法时区分大小写检查</span>
    <span class="nt">&#34;css-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;3.2.0&#34;</span><span class="p">,</span> <span class="err">//.css文件loader</span>
    <span class="nt">&#34;eslint&#34;</span><span class="p">:</span> <span class="s2">&#34;^6.5.0&#34;</span><span class="p">,</span> <span class="err">//静态检查代码错误核心</span>
    <span class="nt">&#34;eslint-config-react-app&#34;</span><span class="p">:</span> <span class="s2">&#34;^5.0.2&#34;</span><span class="p">,</span> <span class="err">//配置eslint为react-app模式</span>
    <span class="nt">&#34;eslint-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;3.0.2&#34;</span><span class="p">,</span> <span class="err">//静态检查代码错误loader</span>
    <span class="nt">&#34;eslint-plugin-flowtype&#34;</span><span class="p">:</span> <span class="s2">&#34;^3.13.0&#34;</span><span class="p">,</span> <span class="err">//eslint检查的plugin</span>
    <span class="nt">&#34;eslint-plugin-import&#34;</span><span class="p">:</span> <span class="s2">&#34;2.18.2&#34;</span><span class="p">,</span> <span class="err">//eslint检查导入语句的plugin</span>
    <span class="nt">&#34;eslint-plugin-jsx-a11y&#34;</span><span class="p">:</span> <span class="s2">&#34;6.2.3&#34;</span><span class="p">,</span> <span class="err">//eslint检查jsx语句的plugin</span>
    <span class="nt">&#34;eslint-plugin-react&#34;</span><span class="p">:</span> <span class="s2">&#34;7.14.3&#34;</span><span class="p">,</span> <span class="err">//eslint检查react语句的plugin</span>
    <span class="nt">&#34;eslint-plugin-react-hooks&#34;</span><span class="p">:</span> <span class="s2">&#34;^1.7.0&#34;</span><span class="p">,</span> <span class="err">//eslint检查react-hooks的plugin</span>
    <span class="nt">&#34;file-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;4.2.0&#34;</span><span class="p">,</span> <span class="err">//文件处理默认loader,webpack中使用了oneOf,并且file-loader放最后,所以只有其他loader未处理情况下才会交由其处理</span> 
    <span class="nt">&#34;fs-extra&#34;</span><span class="p">:</span> <span class="s2">&#34;8.1.0&#34;</span><span class="p">,</span> <span class="err">//扩展自带fs的功能</span>
    <span class="nt">&#34;html-webpack-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;4.0.0-beta.8&#34;</span><span class="p">,</span> <span class="err">//打包html文件的webpack插件</span>
    <span class="nt">&#34;http-proxy-middleware&#34;</span><span class="p">:</span> <span class="s2">&#34;^0.20.0&#34;</span><span class="p">,</span> <span class="err">//HTTP请求代理中间件,一般主要用于处理代理和跨域问题</span>
    <span class="nt">&#34;identity-obj-proxy&#34;</span><span class="p">:</span> <span class="s2">&#34;3.0.0&#34;</span><span class="p">,</span>
    <span class="nt">&#34;is-wsl&#34;</span><span class="p">:</span> <span class="s2">&#34;^2.1.1&#34;</span><span class="p">,</span>
    <span class="err">//下面几项是关于测试的依赖</span>
    <span class="nt">&#34;jest&#34;</span><span class="p">:</span> <span class="s2">&#34;24.9.0&#34;</span><span class="p">,</span>
    <span class="nt">&#34;jest-environment-jsdom-fourteen&#34;</span><span class="p">:</span> <span class="s2">&#34;0.1.0&#34;</span><span class="p">,</span>
    <span class="nt">&#34;jest-resolve&#34;</span><span class="p">:</span> <span class="s2">&#34;24.9.0&#34;</span><span class="p">,</span>
    <span class="nt">&#34;jest-watch-typeahead&#34;</span><span class="p">:</span> <span class="s2">&#34;0.4.0&#34;</span><span class="p">,</span>
    <span class="nt">&#34;mini-css-extract-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;0.8.0&#34;</span><span class="p">,</span> <span class="err">//压缩css文件插件</span>
    <span class="nt">&#34;optimize-css-assets-webpack-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;5.0.3&#34;</span><span class="p">,</span> <span class="err">//优化css和资源文件插件</span>
    <span class="nt">&#34;pnp-webpack-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;1.5.0&#34;</span><span class="p">,</span> <span class="err">//维护依赖路径,加快node_modules的查找速度</span>
    <span class="nt">&#34;postcss-flexbugs-fixes&#34;</span><span class="p">:</span> <span class="s2">&#34;4.1.0&#34;</span><span class="p">,</span> <span class="err">//预处理css,处理flex兼容问题</span>
    <span class="nt">&#34;postcss-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;3.0.0&#34;</span><span class="p">,</span> <span class="err">//css预处理loader</span>
    <span class="nt">&#34;postcss-normalize&#34;</span><span class="p">:</span> <span class="s2">&#34;8.0.1&#34;</span><span class="p">,</span> <span class="err">//引入normalize.css或者sanitize.css</span> 
    <span class="nt">&#34;postcss-preset-env&#34;</span><span class="p">:</span> <span class="s2">&#34;6.7.0&#34;</span><span class="p">,</span> <span class="err">//css兼容处理</span>
    <span class="nt">&#34;postcss-safe-parser&#34;</span><span class="p">:</span> <span class="s2">&#34;4.0.1&#34;</span><span class="p">,</span> <span class="err">//修复css语法错误</span>
    <span class="nt">&#34;react-hot-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;^4.12.14&#34;</span><span class="p">,</span> <span class="err">//热加载处理loader</span>
    <span class="nt">&#34;resolve&#34;</span><span class="p">:</span> <span class="s2">&#34;1.12.0&#34;</span><span class="p">,</span> <span class="err">//引入node中require.resolve()方法</span>
    <span class="nt">&#34;resolve-url-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;3.1.0&#34;</span><span class="p">,</span> <span class="err">//处理url()语句的loader</span>
    <span class="nt">&#34;sass-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;8.0.0&#34;</span><span class="p">,</span> <span class="err">//处理sass文件的loader</span>
    <span class="nt">&#34;semver&#34;</span><span class="p">:</span> <span class="s2">&#34;6.3.0&#34;</span><span class="p">,</span> <span class="err">//格式化版本号字符串</span>
    <span class="nt">&#34;style-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;1.0.0&#34;</span><span class="p">,</span> <span class="err">//处理style文件的loader</span>
    <span class="nt">&#34;terser-webpack-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;2.1.2&#34;</span><span class="p">,</span> <span class="err">//压缩JavaScript</span>
    <span class="nt">&#34;ts-pnp&#34;</span><span class="p">:</span> <span class="s2">&#34;1.1.4&#34;</span><span class="p">,</span> <span class="err">//和pnp-webpack-plugin类似</span>
    <span class="nt">&#34;typescript&#34;</span><span class="p">:</span> <span class="s2">&#34;^3.6.3&#34;</span><span class="p">,</span> <span class="err">//ts</span>
    <span class="nt">&#34;url-loader&#34;</span><span class="p">:</span> <span class="s2">&#34;2.1.0&#34;</span><span class="p">,</span> <span class="err">//将文件转换为base64格式(可以配置应用在小文件上)</span>
    <span class="nt">&#34;webpack&#34;</span><span class="p">:</span> <span class="s2">&#34;4.41.0&#34;</span><span class="p">,</span> <span class="err">//webpack核心</span>
    <span class="nt">&#34;webpack-dev-server&#34;</span><span class="p">:</span> <span class="s2">&#34;3.8.1&#34;</span><span class="p">,</span> <span class="err">//开发环境服务器,具有热加载功能</span>
    <span class="nt">&#34;webpack-manifest-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;2.1.2&#34;</span><span class="p">,</span> <span class="err">//帮助打包时生成资源清单文件的插件</span>
    <span class="nt">&#34;workbox-webpack-plugin&#34;</span><span class="p">:</span> <span class="s2">&#34;4.3.1&#34;</span> <span class="err">//提供完善的ServiceWorker和预缓存文件清单的插件</span>
  <span class="p">},</span>
  <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span> <span class="err">//配置命令,执行npm</span> <span class="err">run</span> <span class="err">xxx即可运行scripts文件下对应的js文件</span>
    <span class="nt">&#34;start&#34;</span><span class="p">:</span> <span class="s2">&#34;node scripts/start.js&#34;</span><span class="p">,</span>
    <span class="nt">&#34;build&#34;</span><span class="p">:</span> <span class="s2">&#34;node scripts/build.js&#34;</span><span class="p">,</span>
    <span class="nt">&#34;test&#34;</span><span class="p">:</span> <span class="s2">&#34;node scripts/test.js&#34;</span>
  <span class="p">},</span>
  <span class="nt">&#34;babel&#34;</span><span class="p">:</span> <span class="p">{</span> <span class="err">//babel配置,也可以配置在.babelrc文件</span>
    <span class="nt">&#34;presets&#34;</span><span class="p">:</span> <span class="p">[</span> 
      <span class="s2">&#34;react-app&#34;</span> <span class="err">//指定按照react-app的模式配置babel</span>
    <span class="p">],</span>
    <span class="nt">&#34;plugins&#34;</span><span class="p">:</span> <span class="p">[</span> 
      <span class="s2">&#34;react-hot-loader/babel&#34;</span> <span class="err">//热更新的babel插件</span>
    <span class="p">]</span>
  <span class="p">},</span>
  <span class="nt">&#34;eslintConfig&#34;</span><span class="p">:</span> <span class="p">{</span>
    <span class="nt">&#34;extends&#34;</span><span class="p">:</span> <span class="s2">&#34;react-app&#34;</span> <span class="err">//eslint规则</span>
  <span class="p">},</span>
  <span class="nt">&#34;browserslist&#34;</span><span class="p">:</span> <span class="p">{</span> <span class="err">//浏览器兼容范围,也可以配置在.browserslistrc文件,会被Autoprefixer</span> <span class="err">Babel</span> <span class="err">postcss-preset-env等使用</span>
    <span class="nt">&#34;production&#34;</span><span class="p">:</span> <span class="p">[</span>
      <span class="s2">&#34;&gt;0.2%&#34;</span><span class="p">,</span> <span class="err">//兼容市场份额在</span><span class="mf">0.2</span><span class="err">%以上的浏览器</span>
      <span class="s2">&#34;not dead&#34;</span><span class="p">,</span> <span class="err">//在维护中</span>
      <span class="s2">&#34;not op_mini all&#34;</span> <span class="err">//忽略OperaMini浏览器</span>
    <span class="p">],</span>
    <span class="nt">&#34;development&#34;</span><span class="p">:</span> <span class="p">[</span> <span class="err">//开发环境只需兼容以下三种浏览器的最新版本</span>
      <span class="s2">&#34;last 1 chrome version&#34;</span><span class="p">,</span>
      <span class="s2">&#34;last 1 firefox version&#34;</span><span class="p">,</span>
      <span class="s2">&#34;last 1 safari version&#34;</span>
    <span class="p">]</span>
  <span class="p">},</span>
  <span class="nt">&#34;jest&#34;</span><span class="p">:</span> <span class="p">{</span> <span class="err">//测试</span>
    <span class="nt">&#34;roots&#34;</span><span class="p">:</span> <span class="p">[</span>
      <span class="s2">&#34;&lt;rootDir&gt;/src&#34;</span>
    <span class="p">],</span>
    <span class="nt">&#34;collectCoverageFrom&#34;</span><span class="p">:</span> <span class="p">[</span>
      <span class="s2">&#34;src/**/*.{js,jsx,ts,tsx}&#34;</span><span class="p">,</span>
      <span class="s2">&#34;!src/**/*.d.ts&#34;</span>
    <span class="p">],</span>
    <span class="nt">&#34;setupFiles&#34;</span><span class="p">:</span> <span class="p">[</span>
      <span class="s2">&#34;react-app-polyfill/jsdom&#34;</span>
    <span class="p">],</span>
    <span class="nt">&#34;setupFilesAfterEnv&#34;</span><span class="p">:</span> <span class="p">[],</span>
    <span class="nt">&#34;testMatch&#34;</span><span class="p">:</span> <span class="p">[</span>
      <span class="s2">&#34;&lt;rootDir&gt;/src/**/__tests__/**/*.{js,jsx,ts,tsx}&#34;</span><span class="p">,</span>
      <span class="s2">&#34;&lt;rootDir&gt;/src/**/*.{spec,test}.{js,jsx,ts,tsx}&#34;</span>
    <span class="p">],</span>
    <span class="nt">&#34;testEnvironment&#34;</span><span class="p">:</span> <span class="s2">&#34;jest-environment-jsdom-fourteen&#34;</span><span class="p">,</span>
    <span class="nt">&#34;transform&#34;</span><span class="p">:</span> <span class="p">{</span>
      <span class="nt">&#34;^.+\\.(js|jsx|ts|tsx)$&#34;</span><span class="p">:</span> <span class="s2">&#34;&lt;rootDir&gt;/node_modules/babel-jest&#34;</span><span class="p">,</span>
      <span class="nt">&#34;^.+\\.css$&#34;</span><span class="p">:</span> <span class="s2">&#34;&lt;rootDir&gt;/config/jest/cssTransform.js&#34;</span><span class="p">,</span>
      <span class="nt">&#34;^(?!.*\\.(js|jsx|ts|tsx|css|json)$)&#34;</span><span class="p">:</span> <span class="s2">&#34;&lt;rootDir&gt;/config/jest/fileTransform.js&#34;</span>
    <span class="p">},</span>
    <span class="nt">&#34;transformIgnorePatterns&#34;</span><span class="p">:</span> <span class="p">[</span>
      <span class="s2">&#34;[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$&#34;</span><span class="p">,</span>
      <span class="s2">&#34;^.+\\.module\\.(css|sass|scss)$&#34;</span>
    <span class="p">],</span>
    <span class="nt">&#34;modulePaths&#34;</span><span class="p">:</span> <span class="p">[],</span>
    <span class="nt">&#34;moduleNameMapper&#34;</span><span class="p">:</span> <span class="p">{</span>
      <span class="nt">&#34;^react-native$&#34;</span><span class="p">:</span> <span class="s2">&#34;react-native-web&#34;</span><span class="p">,</span>
      <span class="nt">&#34;^.+\\.module\\.(css|sass|scss)$&#34;</span><span class="p">:</span> <span class="s2">&#34;identity-obj-proxy&#34;</span>
    <span class="p">},</span>
    <span class="nt">&#34;moduleFileExtensions&#34;</span><span class="p">:</span> <span class="p">[</span>
      <span class="s2">&#34;web.js&#34;</span><span class="p">,</span>
      <span class="s2">&#34;js&#34;</span><span class="p">,</span>
      <span class="s2">&#34;web.ts&#34;</span><span class="p">,</span>
      <span class="s2">&#34;ts&#34;</span><span class="p">,</span>
      <span class="s2">&#34;web.tsx&#34;</span><span class="p">,</span>
      <span class="s2">&#34;tsx&#34;</span><span class="p">,</span>
      <span class="s2">&#34;json&#34;</span><span class="p">,</span>
      <span class="s2">&#34;web.jsx&#34;</span><span class="p">,</span>
      <span class="s2">&#34;jsx&#34;</span><span class="p">,</span>
      <span class="s2">&#34;node&#34;</span>
    <span class="p">],</span>
    <span class="nt">&#34;watchPlugins&#34;</span><span class="p">:</span> <span class="p">[</span>
      <span class="s2">&#34;jest-watch-typeahead/filename&#34;</span><span class="p">,</span>
      <span class="s2">&#34;jest-watch-typeahead/testname&#34;</span>
    <span class="p">]</span>
  <span class="p">},</span>
  
  <span class="nt">&#34;description&#34;</span><span class="p">:</span> <span class="s2">&#34;This project was bootstrapped with Create React App.&#34;</span><span class="p">,</span> <span class="err">//项目描述</span>
  <span class="nt">&#34;main&#34;</span><span class="p">:</span> <span class="s2">&#34;index.js&#34;</span><span class="p">,</span> <span class="err">//入口文件</span>
  <span class="nt">&#34;repository&#34;</span><span class="p">:</span> <span class="p">{</span> <span class="err">//Git仓库地址</span>
    <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;git&#34;</span><span class="p">,</span>
    <span class="nt">&#34;url&#34;</span><span class="p">:</span> <span class="s2">&#34;git+https://github.com/smartzheng/react-wanandroid.git&#34;</span>
  <span class="p">},</span>
  <span class="nt">&#34;keywords&#34;</span><span class="p">:</span> <span class="p">[</span> <span class="err">//密码</span>
    <span class="s2">&#34;root&#34;</span>
  <span class="p">],</span>
  <span class="nt">&#34;author&#34;</span><span class="p">:</span> <span class="s2">&#34;smartzheng&#34;</span><span class="p">,</span> <span class="err">//作者</span>
  <span class="nt">&#34;license&#34;</span><span class="p">:</span> <span class="s2">&#34;ISC&#34;</span><span class="p">,</span> <span class="err">//协议</span>
  <span class="nt">&#34;bugs&#34;</span><span class="p">:</span> <span class="p">{</span>
    <span class="nt">&#34;url&#34;</span><span class="p">:</span> <span class="s2">&#34;https://github.com/smartzheng/react-wanandroid/issues&#34;</span> <span class="err">//bug是上报地址</span>
  <span class="p">},</span>
  <span class="nt">&#34;homepage&#34;</span><span class="p">:</span> <span class="s2">&#34;https://github.com/smartzheng/react-wanandroid#readme&#34;</span> <span class="err">//git项目主页</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div>
    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">smartzheng</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">
        2019-09-30
        
    </span>
  </p>
  
  
</div>
<footer class="post-footer">
      <div class="post-tags">
          <a href="/tags/react/">React</a>
          </div>
      <nav class="post-nav">
        <a class="prev" href="/post/android%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%E4%B9%8B%E7%90%86%E8%A7%A3binder%E9%80%9A%E4%BF%A1%E6%9C%BA%E5%88%B6/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">Android源码分析之理解Binder通信机制</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        <a class="next" href="/post/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3javascript%E4%B9%8B%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE/">
            <span class="next-text nav-default">深入理解JavaScript之原型与原型链</span>
            <span class="next-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:smartzheng1993@email.com" class="iconfont icon-email" title="email"></a>
      <a href="https://github.com/smartzheng" class="iconfont icon-github" title="github"></a>
      <a href="https://weibo.com/2062336885/profile?topnav=1&amp;wvr=6" class="iconfont icon-weibo" title="weibo"></a>
      <a href="https://www.zhihu.com/people/liu-xia-hui-89-70" class="iconfont icon-zhihu" title="zhihu"></a>
      <a href="https://www.douban.com/people/smartzheng/" class="iconfont icon-douban" title="douban"></a>
  <a href="https://smartzheng.github.io/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://gohugo.io">Hugo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  

  <span class="copyright-year">
    &copy; 
    2017 - 
    2020
    
  </span>
</div>
    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/dist/even.26188efa.min.js"></script>








</body>
</html>
